<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root {
        --bg: #3c465c;
        --primary: #78ffcd;
        --solid: #fff;
        --btn-w: 10em;
        --dot-w: calc(var(--btn-w) * 0.2);
        --tr-X: calc(var(--btn-w) - var(--dot-w));
      }
      * {
        box-sizing: border-box;
      }
      *:before,
      *:after {
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        flex-flow: wrap;
        background: var(--bg);
        font-size: 20px;
        font-family: "Titillium Web", sans-serif;
      }
      h1 {
        color: var(--solid);
        font-size: 2.5rem;
        margin-top: 6rem;
      }
      .btn {
        position: relative;
        margin: 0 auto;
        width: var(--btn-w);
        color: var(--primary);
        border: 0.15em solid var(--primary);
        border-radius: 5em;
        text-transform: uppercase;
        text-align: center;
        font-size: 1.3em;
        line-height: 2em;
        cursor: pointer;
      }
      .dot {
        content: "";
        position: absolute;
        top: 0;
        width: var(--dot-w);
        height: 100%;
        border-radius: 100%;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
        display: none;
      }
      .dot:after {
        content: "";
        position: absolute;
        left: calc(50% - 0.4em);
        top: -0.4em;
        height: 0.8em;
        width: 0.8em;
        background: var(--primary);
        border-radius: 1em;
        border: 0.25em solid var(--solid);
        box-shadow: 0 0 0.7em var(--solid), 0 0 2em var(--primary);
      }
      .btn:hover .dot,
      .btn:focus .dot {
        -webkit-animation: atom 2s infinite linear;
        animation: atom 2s infinite linear;
        display: block;
      }
      @-webkit-keyframes atom {
        0% {
          -webkit-transform: translateX(0) rotate(0);
          transform: translateX(0) rotate(0);
        }
        30% {
          -webkit-transform: translateX(var(--tr-X)) rotate(0);
          transform: translateX(var(--tr-X)) rotate(0);
        }
        50% {
          -webkit-transform: translateX(var(--tr-X)) rotate(180deg);
          transform: translateX(var(--tr-X)) rotate(180deg);
        }
        80% {
          -webkit-transform: translateX(0) rotate(180deg);
          transform: translateX(0) rotate(180deg);
        }
        100% {
          -webkit-transform: translateX(0) rotate(360deg);
          transform: translateX(0) rotate(360deg);
        }
      }
      @keyframes atom {
        0% {
          -webkit-transform: translateX(0) rotate(0);
          transform: translateX(0) rotate(0);
        }
        30% {
          -webkit-transform: translateX(var(--tr-X)) rotate(0);
          transform: translateX(var(--tr-X)) rotate(0);
        }
        50% {
          -webkit-transform: translateX(var(--tr-X)) rotate(180deg);
          transform: translateX(var(--tr-X)) rotate(180deg);
        }
        80% {
          -webkit-transform: translateX(0) rotate(180deg);
          transform: translateX(0) rotate(180deg);
        }
        100% {
          -webkit-transform: translateX(0) rotate(360deg);
          transform: translateX(0) rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="btn">
        <span>123</span>
        <div class="dot"></div>
    </div>
  </body>
</html>
